<template>
  <div class="content">
    <el-form
      ref="form"
      :model="form"
      label-position="top"
      :rules="rules"
      label-width="100px"
      class="addVideo"
    >
      <el-form-item
        label="小程序"
        prop="mini_app_id"
      >
        <miniAppSelect
          :label="false"
          @result="miniAppResult"
        />
      </el-form-item>
      <el-form-item
        label="分销方"
        prop="distributor_id"
      >
        <el-select
          v-model="form.distributor_id"
          clearable
          filterable
          collapse-tags
          placeholder="请选择分销方"
        >
          <el-option
            v-for="item in distributorList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import miniAppSelect from '@/common/component/form/miniAppSelect.vue'
import { addDistributor } from '@/api/distribution'
export default {
  components: {
    miniAppSelect
  },
  props: ['distributorList'],
  data() {
    return {
      loading: false,
      form: {
        mini_app_id: '',
        distributor_id: ''
      },
      rules: {
        mini_app_id: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        distributor_id: [{ required: true, message: '请选择小程序类型', trigger: 'change' }]
      }
    }
  },
  mounted() {},
  methods: {
    miniAppResult(value) {
      this.form.mini_app_id = value
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          addDistributor(this.form).then((res) => {
            if (res.status_code === 1) {
              this.close()
              this.$emit('ok')
            }
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
.content {
  padding: 20px;
  .addVideo {
    ::v-deep .el-form-item__label {
      font-weight: 600;
    }
  }
  ::v-deep .search-item {
    .item-label {
      display: none;
    }
  }
  ::v-deep .el-input__inner {
    width: 310px;
  }

  .dialog-footer {
    width: 90%;
    padding-right: 10px;
  }
}
</style>